<template>
  <div>
    <van-nav-bar title="标题">
      <van-icon name="search" slot="right" @click="$router.push('/search')"/>
      <div slot="left">
        <van-icon name="location-o" />北京
      </div>
    </van-nav-bar>
    <div class="list" @scroll="handsroll" ref="list">
      <router-link class="item" :to="'/product/'+item.id" v-for="(item,index) in list" :key="item.id">
        <img :src="'http://www.mianshiti.top'+item.cover" alt="" />
        <div class="name">{{item.name}}</div>
        <div class="price">￥{{item.price}}</div>
      </router-link>
      <div class="foot" v-if="page >= total">到底了</div>

      <van-loading type="spinner" color="#1989fa" :class="{'noneLoading':list.length == 0}" v-if="isLoading" />
      <div class="clear"></div>

      <div class="toTop" @click="toTop" v-if="top > 300">
        <van-icon name="upgrade" />
      </div>

      <van-tabbar route>
        <van-tabbar-item icon="star-o" to="/">精选</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/gwc" :info="cartCount" v-if="$store.cart.length > 0">购物车</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/gwc" v-else>购物车</van-tabbar-item>
        <van-tabbar-item icon="manager-o" to="/myself">我的</van-tabbar-item>
      </van-tabbar>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        top: 0,
        list: [],
        total: 615,
        page: 1,
        isLoading: false,
        cart:[]
      }
    },
    computed: {
      cartCount(){
        let t = 0
        for(let i = 0; i < this.$store.cart.length; i++){
          t += this.$store.cart[i].count
        }
        return t
      }
    },
    methods: {
      handsroll() {
        this.top = this.$refs.list.scrollTop
        // console.log(this.$refs.list.clientHeight, this.$refs.list.scrollHeight, this.$refs.list.scrollTop)
        if (this.page >= this.total) {
          return
        }
        if (this.isLoading) {
          return
        }
        if (this.$refs.list.clientHeight + this.$refs.list.scrollTop == this.$refs.list.scrollHeight) {
          this.page++
          this.getData()
        }
      },
      toTop() {
        this.$refs.list.scrollTop = 0
      },
      getData() {
        this.isLoading = true
        this.$axios.get(`product/pagination?page=${this.page}`).then(res => {
          if (res.errcode == 0) {
            var data = res.data
            this.list = this.list.concat(data.data)
            this.total = data.totalPages
          }
          this.isLoading = false
        })
      }
    },

    mounted() {
      this.getData()
    }
  };


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .van-nav-bar__right {
    font-size: 5vw;
  }

  .list {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    height: calc(100vh - 96px);
  }

  .list .item {
    float: left;
    width: 50vw;
    height: 68vw;
    margin-bottom: 20px;
  }

  .list .item img {
    width: 50vw;
    height: 50vw;
  }

  .list .item .name {
    width: 50vw;
    height: 10vw;
    font-size: 3.2vw;
  }

  .list .item .price {
    width: 50vw;
    height: 8vw;
    color: red;
  }

  .toTop .van-icon {
    position: fixed;
    bottom: 20vw;
    right: 5vw;
    z-index: 100;
    color: #aaa;
    font-size: 10vw;
  }

  .foot {
    text-align: center;
    padding: 10vw 0;
    color: red;
  }

  .van-loading {
    text-align: center;
  }

  .noneLoading {
    line-height: calc(100vh - 96px);
  }
</style>